import React, { useState, useEffect } from 'react';
import { Form, Button, Space, notification } from 'antd';
import { goBack, componentsMap } from '@/utils/util';
import API from '@/api/xjindex.js';
import UploadList from '@/components/UploadList';

const patrolManageCheck = ({ history }) => {
  const [form] = Form.useForm();
  const [fileList, setfileList] = useState([]);
  const TableList = [
    {
      label: '巡检标题',
      name: 'pollingTitle',
      type: 'input',
      isremark: true,
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '单位名称',
      name: 'orgName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '巡检时间',
      name: 'pollingTime',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '创建人',
      name: 'createName',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '创建时间',
      name: 'createTime',
      type: 'input',
      otherProps: {
        disabled: true,
      },
    },
    {
      label: '备注说明',
      name: 'remarks',
      type: 'textarea',
      isremark: true,
    },
  ];
  const uploadOptions = {
    fileTypes: [
      'application/doc',
      'application/pdf',
      'application/msword',
      'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
      'image/jpg',
      'image/jpeg',
      'image/png',
    ],
    maxSize: 50,
    maxNum: 3,
    accept: [
      '.doc,.docx.,.pdf,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,.jpg,.jpeg,.png',
    ],
    acceptMessage: 'jpg/word/pdf',
  };

  function initList() {
    API.selectPomById({ id: history.location.query.id }).then((res) => {
      if (res) {
        form.setFieldsValue(res.t);
        setfileList(res.t.pollingManagementFileList);
      }
    });
  }
  function submitFn(values) {
    values.pollingManagementFileList = values.file;
    values.id = history.location.query.id;
    API.modPom(values).then((res) => {
      if (res) {
        notification.success({
          message: '修改成功',
        });
        goBack();
      }
    });
  }
  useEffect(() => {
    initList();
  }, []);
  return (
    <div className="main-x">
      <Form form={form} onFinish={submitFn}>
        <div className="base-title">巡检信息</div>
        <div className="bgf">
          <div className="ant-form-inline form-x max-x">
            {TableList.map((item) => {
              return (
                <Form.Item
                  key={item.name}
                  label={item.label}
                  name={item.name}
                  className={item.isremark ? 'block' : ''}
                >
                  {componentsMap(item.type, item.otherProps)}
                </Form.Item>
              );
            })}
            <Form.Item
              label="附件信息"
              extra="支持jpg/word/pdf格式,单个大小在50M以内,支持多个上传，最多上传3个附件"
              name="file"
              className="block"
            >
              <UploadList
                uploadUrl="/polling/management/fileUpload"
                downloadUrl="/polling/management/download"
                options={uploadOptions}
                defaultFiles={fileList}
              ></UploadList>
            </Form.Item>
          </div>
        </div>
        <div className="footer-x">
          <Space size={18}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
            <Button type="primary" className="cancel-btn" onClick={goBack}>
              返回
            </Button>
          </Space>
        </div>
      </Form>
    </div>
  );
};
export default patrolManageCheck;
